<template>
	<view class="container">
		<view class="content">
			<view class="options">
				<view class="title">身份类型</view>
				<view class="right_box selects">
					<view class="select_box" @click="typeClick(1)">
						<view class="select">
							<view class="yes_box" v-if="isPt == 1">
								<u-icon name="checkmark-circle-fill" color="#40AE36" size="46"></u-icon>
							</view>
							<view class="yes_box" v-else>
								<view class="no"></view>
							</view>
						</view>
						<view class="text">
							供应商
						</view>
					</view>
					<view class="select_box" @click="typeClick(2)">
						<view class="select">
							<view class="yes_box" v-if="isPt == 2">
								<u-icon name="checkmark-circle-fill" color="#40AE36" size="46"></u-icon>
							</view>
							<view class="yes_box" v-else>
								<view class="no"></view>
							</view>
						</view>
						<view class="text">
							采购商
						</view>
					</view>
				</view>
			</view>
			<view class="options">
				<view class="title">商户类型</view>
				<view class="right_box input_box">
					<input type="text" placeholder="请选择商户类型" disabled @click="show = true" v-model="pageInfo.mcc" />
					<u-icon name="arrow-down" color="#999"></u-icon>
				</view>
			</view>
			<view class="options">
				<view class="title">身份证号</view>
				<view class="right_box input_box">
					<input type="text" placeholder="请输入身份证号" v-model="pageInfo.idcard_number" />
				</view>
			</view>
			<view class="options">
				<view class="title">收货人</view>
				<view class="right_box input_box">
					<input type="text" placeholder="请输入收货人" v-model="pageInfo.name" />
				</view>
			</view>
			<view class="options">
				<view class="title">联系方式</view>
				<view class="right_box input_box">
					<input type="text" placeholder="请输入联系方式" v-model="pageInfo.phone" />
				</view>
			</view>
			<view class="options">
				<view class="title">定位地址</view>
				<view class="right_box input_box">
					<input type="text" placeholder="请选择定位地址" disabled @click="openMap" v-model="pageInfo.address" />
					<u-icon name="map" color="#999" size="40"></u-icon>
				</view>
			</view>
			<view class="options">
				<view class="title">所在地区</view>
				<view class="right_box input_box" @click="addressShow = true">
					<input type="text" v-model="city" placeholder="请选择所在地区" disabled />
					<u-icon name="arrow-down" color="#999"></u-icon>
				</view>
			</view>
			<view class="options">
				<view class="title">详细地址</view>
				<view class="right_box input_box">
					<input type="text" placeholder="请输入详细地址" v-model="pageInfo.address_detail" />
				</view>
			</view>
			<view class="options upload">
				<view class="title">营业执照</view>
				<view class="right_box">
					<view class="images_box" v-for="(item,index) in images" v-if="images.length>0"
						@click="lookImages(index)" :key="index">
						<view class="del_btn" @click.stop="delImg(index)">
							<u-icon name="trash-fill"></u-icon>
						</view>
						<image class="images" :src="item" mode=""></image>
					</view>
					<view class="upload_box" @click="uploadImg" v-if="images.length == 0">
						<u-icon name="plus" size="80" color="#999"></u-icon>
					</view>
				</view>
			</view>
			<view class="options" v-if="status">
				<view class="title">认证状态</view>
				<view class="right_box input_box">
					<text v-if="status == 1" style="color: orange;">审核中</text>
					<text v-else-if="status == 2" style="color: green;">认证通过</text>
					<text v-else style="color: red;">认证失败</text>
				</view>
			</view>
			<view class="options" v-if="status&&status ==3">
				<view class="title">失败原因</view>
				<view class="right_box input_box">
					<text style="color: red;">{{pageInfo.remark}}</text>
				</view>
			</view>
		</view>
		<view class="submit" @click="submitClick" v-if="!status">
			提交
		</view>
		<view class="submit" @click="editClick" v-if="status == 3">
			重新审核
		</view>
		<view class="submit" @click="editClick" v-else-if="status == 2">
			修改信息
		</view>
		<view class="submit error" v-else-if="status == 1">
			审核中
		</view>

		<u-picker v-model="addressShow" mode="region" @confirm="confirm"></u-picker>
		<u-select v-model="show" :list="list" @confirm="mccConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPt: 1,
				isMore: false,
				show: false,
				addressShow: false,
				images: [],
				status: null,
				city: '',
				list: [],
				phoneZz: /^1(3|4|5|6|7|8|9)\d{9}$/,
				emailZz: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
				pageInfo: {
					type: 1,
					mcc: '',
					idcard_number: '',
					name: '',
					phone: '',
					address: '',
					province_code: '',
					city_code: '',
					area_code: '',
					address_detail: '',
					license: ''
				}
			}
		},
		async onLoad() {
			await this.getblock()
			await this.getData()
		},
		methods: {
			async getblock() {
				await this.$allApi.getBlockInfo({
					type: 'auth_type'
				}).then(res => {
					console.log(res.data);
					for (let item of res.data.data) {
						this.list.push({
							label: item,
							value: item
						})
					}

				})
			},
			async getData() {
				await this.$allApi.getAuthenticateInfo({
					type: this.pageInfo.type
				}).then(res => {
					let datas = res.data
					if (datas.length !== 0) {
						this.status = datas.status
						this.pageInfo = {
							id: datas.id,
							type: datas.type,
							mcc: datas.mcc,
							idcard_number: datas.idcard_number,
							name: datas.name,
							phone: datas.phone,
							address: datas.address,
							province_code: datas.province_code,
							city_code: datas.city_code,
							area_code: datas.area_code,
							address_detail: datas.address_detail,
							license: datas.license
						}
						this.isPt = datas.type
						if (datas.type == 1) {
							this.isMore = false
						} else {
							this.isMore = true
						}
						this.city = datas.province + datas.city + datas.area
						this.images.push(datas.license_path)
					}
				})
			},
			submitClick() {

				if (this.pageInfo.idcard_number == '') return this.$u.toast('身份证号不能为空')
				if (this.pageInfo.name == '') return this.$u.toast('收货人不能为空')
				if (this.pageInfo.phone == '') return this.$u.toast('联系电话不能为空')
				if (this.pageInfo.address == '') return this.$u.toast('请选择定位地址')
				if (this.pageInfo.province_code == '') return this.$u.toast('请选择所在地区')
				if (this.pageInfo.address_detail == '') return this.$u.toast('详细地址不能为空')
				if (this.pageInfo.license == '') return this.$u.toast('请上传营业执照')
				this.$allApi.submitAuthenticate(this.pageInfo).then(res => {
					this.$u.toast('资料提交成功')
					this.images = []
					this.getData()
				})
			},
			editClick() {
				if (this.pageInfo.idcard_number == '') return this.$u.toast('身份证号不能为空')
				if (this.pageInfo.name == '') return this.$u.toast('收货人不能为空')
				if (this.pageInfo.phone == '') return this.$u.toast('联系电话不能为空')
				if (this.pageInfo.address == '') return this.$u.toast('请选择定位地址')
				if (this.pageInfo.province_code == '') return this.$u.toast('请选择所在地区')
				if (this.pageInfo.address_detail == '') return this.$u.toast('详细地址不能为空')
				if (this.pageInfo.license == '') return this.$u.toast('请上传营业执照')
				this.$allApi.editAuthenticate(this.pageInfo).then(res => {
					this.$u.toast('修改资料成功')
					this.images = []
					this.getData()
				})
			},
			typeClick(type) {
				this.isPt = type
				if (type == 1) {
					this.isMore = false
				} else {
					this.isMore = true
				}
				this.pageInfo = {
					type: type,
					mcc: '',
					idcard_number: '',
					name: '',
					phone: '',
					address: '',
					province_code: '',
					city_code: '',
					area_code: '',
					address_detail: '',
					license: ''
				}
				this.images = []
				this.city = ''
				this.status = null
				this.getData()
			},
			delImg(index) {
				this.images.splice(index, 1)
				this.pageInfo.license = ''
			},
			lookImages(index) {
				uni.previewImage({
					urls: this.images,
					current: index
				})
			},
			mccConfirm(e) {
				console.log(e);
				this.pageInfo.mcc = e[0].value
			},
			confirm(e) {
				this.city = e.province.label + '-' + e.city.label + '-' + e.area.label
				this.pageInfo.province_code = e.province.value + '0000'
				this.pageInfo.city_code = e.city.value + '00'
				this.pageInfo.area_code = e.area.value
			},
			uploadImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						for (let item of res.tempFiles) {
							if (res.tempFiles[0].size > item.size) {
								this.$api.total('图片大小不能超过5MB，请检查')
								return
							}
							uni.uploadFile({
								url: this.$baseUrl + 'api/upload/upload',
								filePath: item.path,
								name: 'file',
								success: (imgRes) => {
									this.images.push(JSON.parse(imgRes.data).path)
									this.pageInfo.license = JSON.parse(imgRes.data).id
								}
							})
						}

					}
				})
			},
			openMap() {
				console.log(123);
				uni.chooseLocation({
					success: res => {
						this.pageInfo.address = res.address
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.images_box {
		width: 210rpx;
		height: 210rpx;
		margin-right: 10rpx;
		position: relative;

		.del_btn {
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			color: red;
			font-size: 32rpx;
			width: 40rpx;
			height: 40rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
		}

		.images {
			width: 210rpx;
			height: 210rpx;
			border-radius: 6rpx;
		}
	}

	.submit {
		width: 710rpx;
		height: 80rpx;
		border-radius: 10rpx;
		background: #40AE36;
		left: 20rpx;
		position: fixed;
		bottom: calc(20rpx + constant(safe-area-inset-bottom));
		bottom: calc(20rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;

	}

	.error {
		background: #8cce86;
	}

	.agreement {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding: 20rpx;
		border-radius: 10rpx;

		.select {
			margin-right: 34rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.no {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				border: 1px solid #ccc;
				background: #DCDCDC;
			}
		}

		.text {
			flex: 1;

			text {
				color: red;
			}
		}
	}

	.content {
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;

		.options {
			display: flex;
			height: 90rpx;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
			border-bottom: 1px solid #ECECEC;

			.more {
				font-size: 20rpx;
				color: #999;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.selects {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.select_box {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-right: 20rpx;

					.text {
						font-size: 24rpx;
					}

					.select {
						margin-right: 20rpx;

						.yes_box {
							width: 60rpx;
							height: 60rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.no {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							border: 1px solid #ccc;
							background: #DCDCDC;
						}
					}
				}
			}

			.right_box {
				flex: 1;
				padding-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				input {
					flex: 1;
				}
			}

			.title {
				width: 200rpx;
				text-align: left;

				text {
					color: red;
				}
			}
		}

		.options:last-child {
			border: none;
			padding-bottom: 0 !important;
		}

		.options:first-child {
			padding-top: 0 !important;
		}

		.upload {
			height: 220rpx;

			.upload_box {
				width: 210rpx;
				height: 210rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx;
				border: 1px solid #eee;
			}
		}
	}

	.container {
		padding: 30rpx 20rpx;
		min-height: 100vh;
		background: #F8F8F8;
	}
</style>